<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>摩鱼MOYU</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<style type="text/css">
			.colorF60{color: #f60;}
			.mui-collapse-content>p{color: #333;}
			.lcBox>.colorGreen{color: #9cc193;}
			.lcBox{
				    padding-left: 30px;
  	 				margin-left: 20px;
    					border-left: 2px solid #999;
			}
			.cycIcon{
				width: 10px;
				height: 10px;
				background-color:#999;
				display: block;
				border-radius: 50%;
				margin-left: -36px;
				float: left;
			}
			.lcSubBox{
				margin-bottom: 10px;
			}
			.lcSubBox.active *{
				color: #7cce61;
			}
			.lcSubBox.active .cycIcon{
				width: 15px;
				height: 15px;
				background-color: #7CCE61;
				margin-left: -38px;
			}
			.tellphone{
				color: #68a7d4;
			}
			.mui-icon-star-filled.active{
				color: #f60;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<div class="mui-collapse-content">
						<p>
							服务状态: <span class="colorF60">已完工</span>
						</p>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-collapse-content">
						<p>
							服务地址: <span>上海市长宁区中山西路1055号</span>
						</p>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-collapse-content">
						<p>
							联系人: <span>郑亮亮</span>
						</p>
						<p>
							联系电话: <span>15812341234</span>
						</p>
						<p>
							服务工单: <span>15812341234</span>
						</p>
						<p>
							申请时间: <span>2017-04-18</span>
						</p>
						<p>
							预约时间: <span>2017-04-22</span>
						</p>
						<p>
							服务网点: <span>上海市浦东新区能量维修服务部</span>
						</p>
					</div>
				</li>
			</ul>
			<ul class="mui-table-view">
			        <li class="mui-table-view-cell mui-collapse mui-active">
						<a class="mui-navigate-right" href="#">处理状态</a>
						<div class="mui-collapse-content">
							<div class="lcBox">
								<div class="lcSubBox active">
									<i class="cycIcon"></i>
									<p>您提交的工单已经完工，诚邀您对本次服务进行评价，留下宝贵意见！</p>
									<p>2017-04-18</p>
									
								</div>
								<div class="lcSubBox ">
									<i class="cycIcon"></i>
									<p>您提交的服务已派工给陈媛媛，电话<a class="tellphone">18911321231</a>，稍后工程师会与您联系，请保持手机畅通</p>
									<p>2017-04-18</p>
									
								</div>
							</div>
						</div>
					</li>
			    </ul>
			    <div class="row mui-input-row">
					<textarea style="border: 0;" id="question" class="mui-input-clear question" placeholder="请留下您的宝贵意见..."></textarea>
				</div>
			    <div class="mui-content-padded">
					<div class="mui-inline" style="font-size: 14px;line-height: 24px;">服务满意度</div>
					<div class="icons mui-inline" style="margin-left: 6px;">
						<i data-index="1" class="mui-icon mui-icon-star-filled"></i>
						<i data-index="2" class="mui-icon mui-icon-star-filled"></i>
						<i data-index="3" class="mui-icon mui-icon-star-filled"></i>
						<i data-index="4" class="mui-icon mui-icon-star-filled"></i>
						<i data-index="5" class="mui-icon mui-icon-star-filled"></i>
					</div>
				</div>
				<div class="mui-content-padded">
						<button  type="button" class="mui-btn mui-btn-block mui-btn-success">提交</button>
				</div>
				
		</div>
		<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init()
			$(document).ready(function(){
				$(".mui-icon-star-filled").click(function(){
					$(this).addClass("active").prevAll().addClass("active");
					$(this).nextAll().removeClass("active");
				})
			})
		</script>
	</body>

</html>